import React, { Component } from "react";
import {
  Form,
  Input,
  Button,
  Row,
  Col,
  DatePicker,
  Select,
  TreeSelect
} from "antd";
import Content from "../../components/Content";

const { Item } = Form;
const { TextArea } = Input;
const { Option } = Select;
const dateFormat = "YYYY/MM/DD";
const { TreeNode } = TreeSelect;

function handleChange(value) {
  console.log(`selected ${value}`);
}

class FermentationAddForm extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  state = {
    value: undefined
  };

  onChange = value => {
    console.log(value);
    this.setState({ value });
  };

  onSubmit = evt => {
    evt.preventDefault();
    const { onSubmit } = this.props;
    onSubmit && onSubmit();
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 2 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      }
    };

    return (
      <Form
        {...formItemLayout}
        onSubmit={this.onSubmit}
        colon={false}
        style={{ width: 1500 }}
      >
        <Item label="发酵样品编号">
          {getFieldDecorator("fermentation_id")(<Input />)}
        </Item>
        <Item label="筛选菌株编号">
          {getFieldDecorator("filtrate_id")(<Input />)}
        </Item>
        <Item label="菌株保藏编号">
          {getFieldDecorator("preserve_id")(<Input />)}
        </Item>
        <Item label="发酵人">
          {getFieldDecorator("gathering1_place")}
          <Select
            mode="tags"
            style={{ width: "100%" }}
            onChange={handleChange}
            tokenSeparators={[","]}
            showArrow={true}
          >
            <Option value="jack">牛大</Option>
            <Option value="lucy">牛二</Option>
            <Option value="tom">牛牛</Option>
          </Select>
        </Item>
        <Item label="发酵批号">
          {getFieldDecorator("preser2ve_id")(<Input />)}
        </Item>
        <Item label="发酵温度（℃）">
          {getFieldDecorator("gather2ing_place")}
          <Select
            mode="tags"
            style={{ width: "100%" }}
            onChange={handleChange}
            tokenSeparators={[","]}
            showArrow={true}
          >
            <Option value="list1">28℃</Option>
            <Option value="list12">16℃</Option>
            <Option value="list122">26℃</Option>
          </Select>
        </Item>
        <Item label="发酵培养基编号">
          {getFieldDecorator("preser3ve_id")(<Input />)}
        </Item>
        <Item label="传代培养基编号">
          {getFieldDecorator("preser4ve_id")(<Input />)}
        </Item>
        <Item label="斜面生长状况">
          <TreeSelect
            showSearch
            value={this.state.value}
            dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
            allowClear
            treeDefaultExpandAll
            onChange={this.onChange}
          >
            <TreeNode value="baozi" title="孢子" key="0-1">
              <TreeNode value="you" title="有" key="0-1-1" />
              <TreeNode value="wu" title="无" key="0-1-2" />
            </TreeNode>
            <TreeNode value="shengzhang" title="生长状况" key="0-2">
              <TreeNode value="you1" title="强" key="0-2-1" />
              <TreeNode value="wu1" title="中" key="0-2-2" />
              <TreeNode value="xuanze1" title="弱" key="0-2-3" />
              <TreeNode value="xua1nze1" title="其他" key="0-2-4" />
            </TreeNode>
          </TreeSelect>
        </Item>
        <Item label="发酵形式">
          {getFieldDecorator("gatheringq_place")}
          <Select
            mode="tags"
            style={{ width: "100%" }}
            onChange={handleChange}
            tokenSeparators={[","]}
            showArrow={true}
          >
            <Option value="jack">固态发酵</Option>
            <Option value="lucy">液态发酵</Option>
            <Option value="lucy">其他发酵</Option>
          </Select>
        </Item>
        <Item label="发酵时间">
          {getFieldDecorator("gathering_ti2me")}
          <DatePicker className="datepick" format={dateFormat} />
        </Item>
        <Item label="发酵周期（d）">
          {getFieldDecorator("gatherinzg_place")}
          <Select
            mode="tags"
            style={{ width: "100%" }}
            onChange={handleChange}
            tokenSeparators={[","]}
            showArrow={true}
          >
            <Option value="jack">144h</Option>
            <Option value="lucy">96h</Option>
            <Option value="to2m">48h</Option>
            <Option value="to3m">24h</Option>
          </Select>
        </Item>
        <Item label="其他发酵条件">
          {getFieldDecorator("preser6ve_id")(<Input />)}
        </Item>
        <Item label="发酵液颜色">
          {getFieldDecorator("gathering_place")}
          <Select
            mode="tags"
            style={{ width: "100%" }}
            onChange={handleChange}
            tokenSeparators={[","]}
            showArrow={true}
          >
            <Option value="ja21ck">红</Option>
            <Option value="jaqck">橙</Option>
            <Option value="jaeck">黄</Option>
            <Option value="jacek">绿</Option>
            <Option value="jarck">青</Option>
            <Option value="jatck">蓝</Option>
            <Option value="luycy">紫</Option>
            <Option value="luiucy">灰</Option>
            <Option value="luocy">粉</Option>
            <Option value="lupkcy">黑</Option>
            <Option value="luchy">白</Option>
            <Option value="ludcy">棕</Option>
          </Select>
        </Item>
        <Item label="发酵液状况">
          {getFieldDecorator("gathering_place")}
          <Select
            mode="tags"
            style={{ width: "100%" }}
            onChange={handleChange}
            tokenSeparators={[","]}
            showArrow={true}
          >
            <Option value="ja21ck">强</Option>
            <Option value="jaqcak">中</Option>
            <Option value="jaecck">弱</Option>
          </Select>
        </Item>
        <Item label="备注">
          {getFieldDecorator("remark")(<TextArea autosize={{ minRows: 2 }} />)}
        </Item>
        <Item wrapperCol={{ span: 8, offset: 2 }}>
          <Row guuter={16}>
            <Col span={4}>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
            </Col>
            <Col span={4}>
              <Button type="primary">取消</Button>
            </Col>
          </Row>
        </Item>
      </Form>
    );
  }
}
const WrapperedFermentationAddForm = Form.create({
  name: "create acquisition"
})(FermentationAddForm);

class FermentationAdd extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onSubmit = () => {
    const { form } = this.form.props;
    form.validateFields((errs, values) => {
      console.log(errs, values);
    });
  };
  render() {
    return (
      <Content>
        <WrapperedFermentationAddForm
          wrappedComponentRef={ref => (this.form = ref)}
          onSubmit={this.onSubmit}
        />
      </Content>
    );
  }
}

export default FermentationAdd;
